<script>
    (function($) {
    $(document).ready(function() {
    // /criarNotas
    // /deletarNota
    
    $.post("getNotas", function(data) {
        var jsn = JSON.parse(data);
        var $listNotas = $("#listNotas");
            $listNotas.html("");
            var data, dataAux;
            for (var i = 0; i < jsn.length; i++){
                
                dataAux = decodeURIComponent(jsn[i].prazo).split(" ")[0].split("-");
                data = dataAux[2]+"/"+dataAux[1]+"/"+dataAux[0];
                $listNotas.append(
                    $("<li/>").append(
                        $("<a/>", {href: '#notas'}).append(
                            $("<h2/>", {text: decodeURIComponent(jsn[i].titulo), class: "tituloDaNota" })).append(
                            $("<p/>", {text: decodeURIComponent(jsn[i].conteudo), class: "conteudoDaNota"})).append(
                            $("<div/>", {class: "dataNota", text: data})).append(
                            $("<div/>", {class: "deleteNota"}))));
            }
            changeHash("#notas");
    });
        
        $(".aNota").click(function(e){
            e.preventDefault();
        });
        var $alert = $("#alertWrapper");
        $("#novaNota").click(function(){
            $alert.show();
        });
        $alert.click(function(e){
            if(e.target === $alert.get(0)){
                $alert.hide();
            }
        });
        $("#btnCriarNota").click(function(){
            $alert.hide();
            var form = $("#formCriarNota");
            $.post("criarNotas", {data: form.serialize()}, function(){
                alert("Nota criada com sucesso!!");
                console.log(form.serialize());
                form.get(0).reset();
                document.location.reload();
            });
        });
        var del = true;
        $(".deleteNota").click(function(){
            if(del){
                del = false;
                $.post("deletarNota", {data: form.serialize()}, function(){
                    form.get(0).reset();
                });
            }
        });
        
    });
    })(jQuery);
</script>
<div style="text-align: right;"><button id="novaNota"></button></div>
<ul id="listNotas">
    
</ul>

<div id="alertWrapper" style="display: none">

    <div id="alertCriarNota" style="z-index: 4; display: inline-block">

        <h3>Criar Nota</h3>
        <p>Digite nos campos abaixo um título e uma descrição de sua nota.</p>
        <form id="formCriarNota">
            <table>
                <tr>
                    <td>Titulo</td><td><input type="text" name="titulo" id="name" /></td>
                </tr>
                <tr>
                    <td>Conteúdo</td><td><textarea name="conteudo" cols="16" rows="3" maxlength="140"></textarea></td>
                </tr>
                <tr>
                    <td>Data</td><td><input type="date" name="prazo" id="prazo" /></td>
                </tr>
            </table>
            <button id="btnCriarNota" type="button"></button>
        </form>
    </div>

</div>

